<h3>内联代码</h3>
<div class="example" contenteditable="true">
  <p>通过<code>&lt;code&gt;</code>标签内嵌一小段代码。</p>
</div>
<h3>基本代码块</h3>
<p>基本代码块包含在<code>&lt;pre&gt;</code>内。</p>
<div class="example" contenteditable="true">
  <pre>
<code>&lt;p&gt;Sample text here...&lt;/p&gt;</code>
</pre>
</div>
<p>还可以使用<code>.pre-scrollable</code>
class，其作用是设置max-height为350px，并在垂直方向展示滚动条。</p>
<h3>代码高亮</h3>
<p>
代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易，在产品中如需要向用户展现代码应该使用代码高亮。</p>
<p>这里推荐的方案是<a href="https://code.google.com/p/google-code-prettify/" target=
"_blank">Google Code Prettify</a>实现代码高亮。</p>
<p>下面是一个php文件的示例：</p>
<div class="example" contenteditable="true">
  <pre class="prettyprint linenums">
<code>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;title&gt;Zentao Design Guidelines&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
    echo &quot;hello, world!&quot;;
  ?&gt;
  &lt;/body&gt;
&lt;/html&gt;</code>
</pre>
</div>
